<template>
  <div class="home">
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <h1 align="center">员工管理</h1>
    <el-card>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item :model="page" label="姓名">
          <el-input  v-model="page.params.empName" placeholder="员工姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select  v-model="page.params.deptId" placeholder="部门" clearable>
            <el-option label="开发部" value="1"></el-option>
            <el-option label="财务部" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button type="warning" @click="page.params={}">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-button type="primary" size="small" @click="openAddDialog" >添加</el-button>
      <el-table
          :data="dataPage.list"
          stripe
          border
          style="width: 100%;margin-top: 5px">
        <el-table-column
            prop="empId"
            label="员工编号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="empName"
            label="姓名"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="empSex"
            label="性别" align="center">
          <template slot-scope="{row}">
              <span v-if="row.empSex==1">男</span>
              <span v-else-if="row.empSex==0">女</span>
              <span v-else>性别未知</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="empAddress"
            label="住址" align="center">
        </el-table-column>
        <el-table-column
            prop="empSalary"
            label="薪水" align="center">
        </el-table-column>
        <el-table-column
            prop="empBirth"
            label="出生日期" align="center">
        </el-table-column>
        <el-table-column
            prop="deptId"
            label="部门id" align="center">
        </el-table-column>
        <el-table-column
            label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="warning" size="small" @click="openUpdateDialog(row.empId)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteEmpById(row.empId)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNumber"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataPage.total" style="margin-top: 5px">
      </el-pagination>
    </el-card>



    <el-dialog title="添加员工" :visible.sync="addDialog"  width="45%" v-if="addDialog">
      <!-- 子组件 员工记录添加 -->
      <emp-add @test="closeDialog"></emp-add>
    </el-dialog>



    <el-dialog title="更新员工" :visible.sync="updateDialog"  width="45%" v-if="updateDialog">
      <!-- 子组件 员工记录添加 -->
      <emp-update :emp-id="empId" @test="closeDialog"></emp-update>
    </el-dialog>









  </div>
</template>

<script>
import request from "@/network/request"
import EmpAdd from "@/views/EmpAdd.vue"
import EmpUpdate from "@/views/EmpUpdate.vue";
export default {
  name: 'HomeView',
  components: {
      EmpAdd,
      EmpUpdate
  },
  // 当组件创建时候
  created() {
    this.getEmpPageList();
  },
  data(){
    return {
      page:{
        pageNumber:1,
        pageSize:10,
        params:{
          empName:"",
          deptId:null
        }
      },
      dataPage:{
        list:[],
        total:0,
        pages:0
      },
      addDialog:false,
      updateDialog:false,
      empId:undefined
    }
  },
  methods:{
    getEmpPageList(){
      // 发送axios 请求获取后端数据
      request({
        url:"/emp/getEmpPageList",
        method:"post",
        data:this.page
      }).then(res=>{
        this.dataPage.list=res.data.list
        this.dataPage.total=res.data.total
        this.dataPage.pages=res.data.pages;
      })
    },
    doSearch(){
      this.getEmpPageList()
    },
    handleSizeChange(val) {
      this.page.pageSize=val
      this.getEmpPageList()
    },
    handleCurrentChange(val) {
      this.page.pageNumber=val
      this.getEmpPageList()
    },
    // 打开添加对话框
    openAddDialog(){
      this.addDialog=true
    },
    closeDialog(){
      this.addDialog=false
      this.updateDialog=false
      this.getEmpPageList()
    },
    openUpdateDialog(empId){
      this.updateDialog=true
      this.empId=empId;
    },
    deleteEmpById(empId){
      this.$confirm('确定删除当前记录?', '删除记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url:"/emp/delete/"+empId,
          method:"delete"
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getEmpPageList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    }





  }

}
</script>
